<template>
	<view>
		<comHeader :config="navConfig" />
		<view class="layer">
	<!-- 持卡人信息 -->
				<view class="ckText">请填写银行预留手机号</view>
	
		<!-- 银行卡表单 -->
			<view class="table2">
				<view class="order-info-line">
					<text class="order-label">银行卡号</text>
					<input type="text" placeholder="请输入银行卡卡号" placeholder-style="color:#999999;" class="order-input">
				</view>
				<view class="order-info-line2">
					<text class="order-label">所属银行</text>
					<view class="order-inputs">工商银行</view>
				</view>
				<view class="order-info-line">
					<text class="order-label">卡类型</text>
					<view class="order-inputs">储蓄卡</view>
				</view>
				<view class="order-info-line">
					<text class="order-label">手机号</text>
					<input type="text" placeholder="请输入银行预留手机号" placeholder-style="color:#999999;" class="order-input">
				</view>
			</view>
			<!-- 确认提交 -->
			<view>
				<!-- <view class="btn" type="button" @click="togglePopup('center', 'tip')"><i>确认提交</i></view> -->
				<navigator url="entercode" class="btn" type="button"><i>下一步</i></navigator>
				<!-- <uni-popup ref="popup" :type="type" @change="change">{{ content }}</uni-popup>
				<uni-popup :show="show" :type="type" :custom="true" :mask-click="false" @change="change">
					<view class="uni-tip">
						<view class="uni-tip-title">绑定成功</view>
						<image class="uni-tip-content" src="../../../static/myPic/chenggong.png"></image>
						<navigator url="order" class="uni-tip-group-button">
							<view class="uni-tip-button" @click="cancel('tip')">返回支付</view>
						</navigator>
					</view>
				</uni-popup> -->
				<!-- <uni-popup ref="popup" :type="type" @change="change">{{ content }}</uni-popup>
				<uni-popup :show="show" :type="type" :custom="true" :mask-click="false" @change="change">
					<view class="uni-tip">
						<view class="uni-tip-title">提示</view>
						<view class="uni-tip-content">是否需要再次排队</view>
						<view class="uni-tip-group-button">
							<view class="uni-tip-button" @click="cancel('tip')">取消</view>
							<view class="uni-tip-button" @click="cancel('tip')">确定</view>
						</view>
					</view>
				</uni-popup> -->
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcon from "@/components/uni-icon/uni-icon.vue"
	// import validCode from '@/components/validCode.vue'
	export default {
		components: {
			uniIcon,
			// validCode
		},
		data() {
			return {
				validCode:"",
				dis:"",
				navConfig: {
					comScroll:0,
					isFixed:false, //是否absolute布局
					left: {
						isShowLeft: true,
						leftGobackColor: 'black', //左边返回icon颜色
					},
					mid: {
						isShowMid: true,
						text: '银行卡信息',
						textColor: '#000'
					},
					right: {
						text: '',
						isShowRight: false,
						ico: '', //右侧图标地址
						isShowRightIco: '' //是否显示右侧图标
					}
				},
			}
		},
			methods: {
				togglePopup(type, open) {
					
					this.type = type
					if (open === 'tip') {
						this.show = true
					} else {
						this.$refs[open].open()
					}
				},
				cancel(type) {
					if (type === 'tip') {
						this.show = false
						return
					}
					this.$refs[type].close()
				},
				change(e) {
					console.log(e.show)
				},
			}
		}
</script>

<style>
	*{
		margin: 0;
		padding: 0;
	}
	
	i {
		font-style: normal;
	}
	
	.layer{
		position: absolute;
		width: 750upx;
		height: 1334upx;
		/* background-color: #F6F6F6; */
	}
		
/* 持卡人信息 */
	.chiKa{
		width: 540upx;
		margin-top: 20upx;
		margin-left: 6upx;
		height:27upx;
	}
	.chiKa .SG{
		color: #54B0FF;
		width: 5upx;
		height: 23upx;
		margin-left: 12upx;
		font-size: 23upx;
		float: left;
	}
	.chiKa i{
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: #010101;
		margin-left: 52upx;
	}
	.ckText{
		margin-left: 55upx;
		margin-top: 124upx;
		width: 350upx;
		height: 23upx;
		font-size: 24upx;
		font-family: PingFang SC Regular;
		color: #CFCFCF;
		line-height: 36upx;
	}
	
	/* 持卡人表单 */
	.table1{
		width: 690upx;
		height: 240upx;
		box-shadow: 0px 0px 15px 0px rgba(232,232,232,1);
		margin-left: 30upx;
		margin-top: 107upx;
	}
	.table1 .label{
		width: 120upx;
		height: 26upx;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: #333333;
		margin-left: 52upx;
		margin-top: 34upx;
		float: left;
	}
	.table1 .one{  
		margin-left: 90upx;
		margin-top: 24upx;
		width: 350upx;
		height: 26upx;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: #BBBBBB;
		float: left;
	}
	.table1 hr{
		border: none;
		margin-left: 42upx;
		width: 644upx;
		height: 0.1upx;
		color: #F6F6F6;
		margin-top: 40upx;
	}
	.table1 .two{
		margin-left: 90upx;
		margin-top: 24upx;
		width: 280upx;
		height: 26upx;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: #BBBBBB;
		float: left;
	}
	.table1 .three{
		margin-left: 90upx;
		margin-top: 24upx;
		width: 266upx;
		height: 26upx;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: #000964;
		float: left;
	}
	
	/* 银行卡信息 */
		.yhKa{
			width: 540upx;
			margin-top: 20upx;
			margin-left: 6upx;
			height:27upx;
		}
		.yhKa .SG{
			color: #54B0FF;
			width: 5upx;
			height: 23upx;
			margin-left: 12upx;
			font-size: 23upx;
			float: left;
		}
		.yhKa i{
			font-size: 28upx;
			font-family: PingFang SC Regular;
			color: #010101;
			margin-left: 52upx;
		}
		
		/* 银行卡表单 */
		.table2{
			width: 690upx;
			height: 385upx;
			box-shadow: 0px 0px 15px 0px rgba(232,232,232,1);
			margin-left: 30upx;
			margin-top: 50upx;
			background: #FFFFFF;
		}
		.order-info-line{
			width: 614upx;
			margin-top: 44upx;
			display: flex;
			flex-direction: row;
		}
		.order-info-line2{
			width: 614upx;
			margin-top: 29upx;
			display: flex;
			flex-direction: row;
		}
		.order-label{
			width: 125upx;
			display: block;
			font-size: 28upx;
			height: 28upx;
			padding-top: 22upx;
			margin-left: 30upx;
			
		}
		.order-input{
			height: 28upx;
			width: 400upx;
			font-size: 28upx;
			padding-top: 17upx;
			margin-left: 80upx;
			color:#999999;
		}
		.order-input1{
			height: 28upx;
			width: 400upx;
			font-size: 28upx;
			padding-top: 22upx;
			margin-left: 80upx;
			color:#999999;
		}
		.order-inputs{
			height: 28upx;
			width: 400upx;
			font-size: 28upx;
			padding-top: 22upx;
			margin-left: 80upx;
			color:#000964;
		}
		/* 确认提交 */
		.btn{
			width: 388upx;
			height: 72upx;
			margin-left: 181upx;
			margin-top: 94upx;
			margin-bottom: 34upx;
			border-radius: 35upx;
			background-image: linear-gradient(to right, #54B0FF,#577AFF);
			filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#577AFF', endColorstr='#54B0FF', GradientType=1); 
		}
		.btn i{
			width: 120upx;
			height: 26upx;
			padding: 17upx 0 0 155upx;
			font-size: 28upx;
			color: #fff;
			position: absolute;
		}
		
		/* .uni-tip {
			width: 455upx;
			height: 304upx;
			background: #fff;
			box-sizing: border-box;
			border-radius: 10upx;
		}
		
		.uni-tip-title {
			padding: 41upx 0 0 0;
			text-align: center;
			font-size: 32upx;
			font-family: PingFang SC Regular;
			color: rgba(51,51,51,1);
		}
		
		.uni-tip-content {
			margin-left: 188upx;
			margin-top: 28upx;
			width: 71upx;
			height: 71upx;
		}
		
		.uni-tip-group-button {
			display: flex;
			width: 209upx;
			height: 58upx;
			margin-left: 123upx;
			margin-top: 35upx;
			border-radius: 35upx;
			background-image: linear-gradient(to right, #54B0FF,#577AFF);
			filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#577AFF', endColorstr='#54B0FF', GradientType=1); 
			
		}
		
		.uni-tip-button {
			width: 100%;
			font-size: 14upx;
			padding: 13upx 0 0 55upx;
			font-size: 14upx;
			color: #fff;
		} */
		/* 提示窗口 */
		.uni-tip {
			width: 455upx;
			height: 324upx;
			background: #fff;
			box-sizing: border-box;
			border-radius: 15upx;
			
		}
		
		.uni-tip-title {
			text-align: center;
			padding: 41upx 0 0 0;
			font-weight: bold;
			font-size: 32upx;
			color: #333;
			font-family: PingFang SC Regular;
			margin-top: 41upx;
			/* margin-left: 168upx; */
			position: relative;
		}
		
		.uni-tip-content {
			margin-left: 193upx;
			margin-top: 28upx;
			width: 71upx;
			height: 71upx;
		}
		
		.uni-tip-group-button {
			width: 209upx;
			height: 58upx;
			box-shadow: 0upx 0upx 15upx 0upx rgba(232,232,232,1);
			margin-left: 127upx;
			margin-top: 45upx;
			border-radius: 50upx;
			background-image: linear-gradient(to right, #54B0FF,#577AFF);
			filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#577AFF', endColorstr='#54B0FF', GradientType=1); 
			
		}
		
		.uni-tip-button {
			position: absolute;
			font-size: 28upx;
			/* padding: 13upx 0 13upx 55upx; */
			color: #fff;
			margin-left: 49upx;
			margin-top: 9upx;
		}
</style>
